<template>
  <div class="navigation-bar">
    <div class="brief-title">
      <span>导航栏</span>
    </div>
        <div v-if="menu" class="boxs">
          <div class="box"
               v-for="(item, index) in menu"
               :key="index"
               :class="item.code"
          >
            <div class="nav-title-group">
              <div class="nav-line"></div>
              <div class="nav-title">{{ item.name }}</div>
            </div>
            <div class="nav-container">
              <div
                v-for="(_item, _index) in item.children"
                :key="_index"
                class="nav-wrapper"
              >
                <div
                  v-for="(item, index) in _item.children"
                  :key="index"
                  :class="item.noMenu ? 'nav-item active' : 'nav-item'"
                  @click="item && item.path ? toLink(item.path) : ''"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
    <div v-else>
      <div
        v-for="(item, index) in navbars"
        :key="index"
        :class="item.class"
      >
        <div class="nav-title-group">
          <div class="nav-line"></div>
          <div class="nav-title">{{ item.title }}</div>
        </div>
        <div class="nav-container">
          <div
            v-for="(_item, _index) in item.navs"
            :key="_index"
            class="nav-wrapper"
          >
            <div
              v-for="(item, index) in _item"
              :key="index"
              :class="item.noMenu ? 'nav-item active' : 'nav-item'"
              @click="item && item.url ? toLink(item.path) : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";

export default {

  data() {
    return {
      type: "leadership",
      isMenu: false,
      navbars: [
        {
          title: "信息查询",
          class: "",
          navs: [
            [
              {name: "教员信息", isActive: false},
              {name: "教学任务", isActive: false},
            ],
            [
              {name: "课表", isActive: false},
              {name: "空闲场地", isActive: false},
            ],
            [
              {name: "课时量", isActive: false},
              {name: "课程考核实施计划", isActive: false},
            ],
            [
              {name: "考试安排", isActive: false},
              {name: "课程考核成绩", isActive: false},
            ],
            [
              {name: "课程考核成绩分布", isActive: false},
              {name: "优质课信息", isActive: false},
            ], [
              {name: "学员评教结果查看", isActive: false},
              {name: "督导评教结果查看", isActive: false},
            ],
            [
              {name: "综合评教结果查看", isActive: false},
              {name: "工作绩效信息查询", isActive: false},
            ],
            [
              {name: "公共考试成绩查询", isActive: false},
              {name: "一线数据统计分析查询", isActive: false},
            ],
            [
              {name: "教学基础数据统计", isActive: true},

            ],
          ],
        },

        {
          title: "教学计划",
          class: "yellow",
          navs: [
            [
              {
                name: "排课",
                isActive: true,
                url: "/teacher/assessmentPlan",
              },
            ],

          ],
        },
        {
          title: "课程考核",
          class: "red",
          navs: [
            [
              {
                name: "试卷册材料打印",
                isActive: true,

              },
              {
                name: "课程成绩录入、打印",
                isActive: true,

              }
            ],

          ],
        },
        {
          title: "评教",
          class: "green",
          navs: [
            [
              {
                name: "专项督导信息填报",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },
              {
                name: "同行评教结果提交",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },
            ],

          ],
        },
        {
          title: "优质课",
          class: "purple",
          navs: [
            [
              {
                name: "优质课候选对象导入",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },

            ],

          ],
        },
        {
          title: "领导听查课",
          class: "yellow",
          navs: [
            [
              {
                name: "听课数据填报",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },

            ],

          ],
        },
        {
          title: "数学课题",
          class: "",
          navs: [
            [
              {
                name: "课题申报",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },

            ],

          ],
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["menu"]),
  },//计算属性
};

</script>

<style lang="less" scoped>
@import "../../../styles/home";

  .main-container .right-container .block-container .navigation-bar {
    width: 389px;
    height: 888px;
    background: #ffffff;
    box-shadow: 1px 2px 6px rgb(138 138 138 / 16%);
    border-radius: 9px;
    padding-top: 20px;
  }
  .main-container {
    .left-container {
      .user-info {


        div {
          line-height: 35px;
        }

      }
    }

    .right-container {
      .common-functions {
        ul {
          li {
            width: 446px;
          }
        }
      }

      .block-container {
        .navigation-bar {
          > div {
            &:nth-child(2) {
              margin-top: 10px;
            }
          }

          .nav-title-group {
            margin-top: 0;
          }

          .nav-container {
            padding: 10px 33px 0;

            .nav-wrapper {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-bottom: 12px;
              width: 100%;

              .nav-item {
                font-size: 18px;
                color: #666666;
              }

              .active {
                color: #104e98;
                cursor: pointer;
              }
            }
          }

          .yellow {
            .nav-line {
              border: 1px solid #f5c33a;
            }

            .nav-title {
              background: #fff6ef;
              border: 1px solid #f3b815;
              color: #f3b815;
            }
          }

          .grep {
            .nav-line {
              border: 1px solid #999999;
            }

            .nav-title {
              background: #dcdcdc;
              border: 1px solid #666666;
              color: #666666;
            }
          }

          .red {
            .nav-line {
              border: 1px solid #fd3819;
            }

            .nav-title {
              background: #ffefef;
              border: 1px solid #ff3819;
              color: #ff3819;
            }
          }

          .purple {
            .nav-line {
              border: 1px solid #5230e9;
            }

            .nav-title {
              background: #efebff;
              border: 1px solid #5230e9;
              color: #5230e9;
            }
          }

          .green {
            .nav-line {
              border: 1px solid #22c86c;
            }

            .nav-title {
              background: #f1fff8;
              border: 1px solid #02c86c;
              color: #02c86c;
            }
          }
        }
      }
    }
  }




</style>
